<template>
  <div>
    <el-container>
      <el-header class="header">
        <Header />
      </el-header>
      <el-main>
        <router-view :key="$route.path"></router-view>
      </el-main>
      <el-footer class="footer">
        <Footer />
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import Header from './components/Header'
import Footer from './components/Footer'

export default {
  data() {
    return {}
  },
  methods: {
    // 获取用户购物车
    queryGoodsList() {
      const userId = this.$store.state.user.profile.userId
      this.$store.dispatch('cart/asyncGetCartList', {
        userId
      })
    }
  },
  mounted() {
    this.queryGoodsList()
  },
  components: {
    Header,
    Footer
  },
  watch: {},
  computed: {}
}
</script>

<style>
body {
  margin: 0;
  background-color: #f5f5f5;
}

.header {
  background-color: #545c64;
  padding: 0 60px !important;
}

.footer {
  background-color: #545c64;
  height: 100px !important;
}
</style>
